<template>
	<view class="content">
		<!--签约房屋信息-->
		<view class="content_1">
			<view class="house_view">
				<image class="house_img" :src="houseimg"></image>
				<view class="house_detail">
					<view class="house_name">{{data.house_name}}</view>
					<!-- <view class="house_info">{{housetype}}·{{housedirection}}·{{housearea}}</view>
					<view class="house_info">{{housename}}·{{houseadd}}</view>
					<view class="house_tips">
						<block v-for="(item_tips, index_tips) in tipsList" :key='index_tips'>
							<view class="tips">{{item_tips.show_name}}</view>
						</block>
					</view> -->
					<view class="house_money">代缴费金额：¥ {{data.stay_money}}</view>
				</view>
			</view>
		</view>
		<!--支付信息-->
		<view class="content_2">
			<view class="title_2">支付信息</view>
			<view class="integral_view">
				<view class="integral_text">积分抵扣</view>
				<switch color="#00E266" @change="change_point" :checked="switchPoint" ></switch>
			</view>
		</view>
		<!--费用详细-->
		<view class="content_3">
			<view class="detail_money">
				<view class="costdetail_box">
					<view class="cost_name">租金费用</view>
					<view class="cost_time">（{{data.month.show_name}}）</view>
				</view>
				<view class="cost_money">￥{{data.stay_money}}元</view>
			</view>
			
			<view class="detail_money">
				<view class="costdetail_box">
					<view class="cost_name">服务费用</view>
					<view class="cost_time">（按房费比例{{tipMoney}}）</view>
				</view>
				<view class="cost_money">￥{{data.tip_money}}元</view>
			</view>
			
			<view class="detail_money">
				<view class="costdetail_box">
					<view class="cost_name">抵扣积分</view>
					<view class="cost_time"></view>
				</view>
				<view class="cost_money" style="color: #FE4E2C;">{{use_point}}</view>
			</view>
			
			<view class="detail_money">
				<view class="costdetail_box">
					<view class="cost_name">抵扣金额</view>
					<view class="cost_time"></view>
				</view>
				<view class="cost_money" style="color: #FE4E2C;">- ￥{{point_money}}元</view>
			</view>
			
			<view class="detail_money">
				<view class="costdetail_box">
					<view class="cost_name">优惠金额</view>
					<view class="cost_time"></view>
				</view>
				<view class="cost_money" style="color: #FE4E2C;">- ￥{{point_money}}元</view>
			</view>
		</view>

		<!--底部提交-->
		<view class="content_5">
			<view class="total_view">
				<image class="total_icon" src="../../../static/index/detail/pay/house_pay.svg"></image>
				<view class="total_money" >
					<view class="pay_money">￥{{total_money}}</view>
					<!-- <view class="pay_money">￥{{data.stay_money - data.discount_price.point_money}}</view> -->
					<view class="count_money">已优惠￥{{point_money}}</view>
				</view>
				<!-- <view class="total_money" > -->
					
				<!-- </view> -->
				<view class="service_money">含服务费￥{{data.tip_money}}</view>
			</view>
			<view class="submit" v-on:click.once="toPay">去支付</view>
		</view>
	</view>
</template>

<script>
	//导入接口请求文件
	import {Request} from '../../../utils/request.js';	// 导入接口请求文件
	import Config from '../../../utils/config.js';		// 导入配置文件
	//定义getApp对象
	const app = getApp();
	export default {
		data() {
			return {
				tipMoney: Config.service.tipMoney,				// 服务费显示
				district_money: parseFloat('0.00').toFixed(2),	// 优惠价格显示
				order_id: 0,
				houseimg: '',
				data: {					//  订单详情
					tip_money: '0.00',	//  服务费
					stay_money: '0.00',	//  租金费用
					month:{
						show_name: '0个月',	// 租期月数
					}
				},				
				switchPoint: false,							//	积分按钮开关
				use_point: 0.00,							//	使用的积分数
				point_money: parseFloat('0.00').toFixed(2),	//  抵扣积分金额
				district_money: '0.00',
				total_money: '0.00',
			}
		},
		methods: {
			//使用积分开关按钮
			change_point:function(e){
				this.point_off = e.detail.value;
				if(!this.switchPoint){
					this.switchPoint = !this.switchPoint;
					new Request().showToast('暂无积分抵扣','none',()=>{
						setTimeout(() => {
							this.$nextTick(()=>{
								this.switchPoint = false;
							});
						}, 1500);
					});
					return;
				}
				if(e.detail.value == true){
					//使用抵扣积分数
					this.use_point = this.data['discount_price']['use_point'];
					//抵扣金额
					this.point_money = this.data['discount_price']['point_money'];
					//优惠金额
					this.district_money = parseFloat(this.data['discount_price']['point_money']).toFixed(2);
					//总金额
					this.total_money = (parseFloat(this.total_money) - parseFloat(this.data['discount_price']['point_money'])).toFixed(2);
					this.switchPointStatus = true;
				}
				if(e.detail.value == false){
					//使用抵扣积分数
					this.use_point = parseFloat('0.00').toFixed(2);
					//抵扣金额
					this.point_money = parseFloat('0.00').toFixed(2);
					//优惠金额
					this.district_money = '0.00';
					// 总金额
					this.total_money = (parseFloat(this.data['total_money']) + parseFloat(this.data['discount_price']['point_money'])).toFixed(2);
					this.switchPointStatus = false;
				}
			},
			toPay: function() {
				let pointMoney = this.switchPointStatus?this.point_money:0;
				// 原 房源租金 支付地址 'customer/Order_Cont/PayOrder'
				// 现 房源租金 支付地址 'payment/PayHouseRentMoney/PayOrder'
				let url = 'payment/Pay_House_Rent_Money/PayOrder';
				new Request(url).request(
					()=>{
						return 'POST'
					},
					()=>{
						return {
							openid: app.globalData.openid,
							order_id: this.order_id,
							DevelopVersion: app.globalData.DevelopVersion,
							project: app.globalData.project,
							userid: app.globalData.userid,
							point_money: pointMoney
						}
					},
					(res)=>{
						//判断
						if(res.data.code == 0){
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								position: 'center'
							});
							return;
						}
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp.toString(),
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: 'MD5',
							paySign: res.data.sign,
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
								uni.reLaunch({
									url:'/pages/index/index'
								})
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								uni.showToast({
									position: 'center',
									title: '已取消支付',
									icon: 'none'
								})
							}
						});
					}
				)
			}
		},
		onLoad(option) {
			this.order_id = option.order_id;	//代缴账单索引id
			new Request('customer/Order_Cont/GetDetail').request(
				()=>{
					return 'POST'
				},
				()=>{
					return {
						openid: app.globalData.openid,
						DevelopVersion: app.globalData.DevelopVersion,
						project: app.globalData.project,
						order_id: this.order_id,
					}
				},
				(res)=>{
					let ResponseData = res.data.data;
					this.data = res.data.data;
					//	房子图片
					this.houseimg = app.globalData.host + res.data.data.house_img;
					//	代缴账单金额 保留两位小数点					
					this.data['stay_money'] = this.data['stay_money'].toFixed(2);
					//	判断是否可使用积分
					this.switchPoint = this.data['discount_price']['is_point_money'] == 1 ? true : false;
					//	服务费
					this.data['tip_money']	= this.data['tip_money'].toFixed(2);
					//	使用抵扣积分数
					this.use_point = this.data['discount_price']['use_point'];
					//	抵扣金额
					this.point_money = parseFloat(this.data['discount_price']['point_money']).toFixed(2);
					//	优惠金额
					this.district_money = (this.data['discount_price']['district_money'] - 0).toFixed(2);
					//	总金额
					this.total_money = (this.data['total_money'] - 0).toFixed(2);
					
					this.discount_price = ResponseData.discount_price;		//	订单积分信息
					this.district_money	= parseFloat(ResponseData.discount_price.district_money).toFixed(2);		//  订单优惠金额
					this.switchPointStatus = this.data['discount_price']['is_point_money'] == 1 ? true : false;		//	判断是否可使用积分
				}
			)
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	.content {
		padding-bottom: 190upx;
	}

	/*
		房源详细样式
	*/
	.content_1 {}

	.house_view {
		height: 246upx;
		background-color: #FFFFFF;
		padding: 27upx 24upx;
		display: flex;
		align-items: center;
	}

	.house_img {
		width: 304upx;
		height: 246upx;
		background-color: #8E83C7;
		margin-right: 24upx;
	}

	.house_detail {
		height: 258upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.house_name {
		height: 43upx;
		line-height: 43upx;
		font-size: 32upx;
		color: #333333;
	}

	.house_info {
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #999999;
		width: 400upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.house_tips {
		height: 30upx;
		display: flex;
	}

	.tips {
		height: 30upx;
		line-height: 30upx;
		color: #FFFFFF;
		font-size: 20upx;
		background-image: linear-gradient(to right, #87ECC6, #8ED5EE); //颜色渐变效果(从左到右)
		margin-right: 16upx;
		padding: 0upx 20upx;
	}

	.house_money {
		height: 46upx;
		line-height: 46upx;
		font-size: 34upx;
		color: #FFC26D;
	}

	/*
		支付信息样式
	*/
	.content_2 {
		height: 88upx;
		background-color: #B3E9DC;
		display: flex;
		align-items: center;
		padding-left: 30upx;
	}

	.title_2 {
		height: 40upx;
		line-height: 40upx;
		font-size: 30upx;
		color: #FFFFFF;
		margin-right: 50upx;
		white-space: nowrap;
	}

	.integral_view {
		height: 42upx;
		width: 430upx;
		background-color: #FFFFFF;
		border-top-left-radius: 30upx;
		border-bottom-left-radius: 30upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25upx 65upx;
	}

	.integral_text {
		height: 40upx;
		line-height: 40upx;
		font-size: 30upx;
		color: #666666;
	}

	/*
		费用详细样式
	*/
	.content_3 {
		/* height: 200upx; */
		height: 400upx;
		margin: 0 15upx;
		border-radius: 26upx;
		background-color: #FFFFFF;
		margin-top: 40upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 40upx;
	}

	.detail_money {
		width: 100%;
		height: 38upx;
		line-height: 38upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.costdetail_box {
		height: 38upx;
		font-size: 28upx;
		display: flex;
		align-items: baseline;
		color: #333333;
	}

	.cost_name {
		margin-right: 10upx;
	}

	.cost_time {
		font-size: 18upx;
		color: #999999;
	}

	.cost_money {
		height: 38upx;
		line-height: 38upx;
		font-size: 28upx;
		color: #999999;
	}

	/*
		优惠券样式
	*/
	.content_4 {
		height: 120upx;
		margin-top: 40upx;
	}

	.coupon_view {
		height: 120upx;
		margin: 0 15upx;
		border-radius: 26upx;
		background-color: #FFFFFF;
		padding: 0upx 70upx;
		display: flex;
		align-items: center;
	}

	.coupon_icon {
		height: 28upx;
		width: 28upx;
		border-radius: 28upx;
		border: 5upx solid #999999;
		margin-right: 35upx;
		box-sizing: border-box;
	}

	.coupon_icon_active {
		height: 28upx;
		width: 28upx;
		border-radius: 28upx;
		border: 10upx solid #519DFF;
		margin-right: 35upx;
		box-sizing: border-box;
	}

	.coupon_name {
		height: 38upx;
		line-height: 38upx;
		font-size: 28upx;
		color: #999999;
	}

	.coupon_name_active {
		height: 38upx;
		line-height: 38upx;
		font-size: 28upx;
		color: #519dff;
	}

	/*
		底部提交样式
	*/
	.content_5 {
		position: fixed;
		z-index: 999;
		height: 100upx;
		width: 734upx;
		background-color: #49453A;
		bottom: 0upx;
		left: 0upx;
		padding-left: 20upx;
	}

	.total_view {
		height: 100upx;
		display: flex;
		align-items: center;
	}

	.total_icon {
		height: 92upx;
		width: 92upx;

	}

	.total_money {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-right: 20upx;
		margin-left: 20upx;
	}

	.pay_money {
		height: 40upx;
		line-height: 40upx;
		font-size: 30upx;
		color: #FFFFFF;
	}

	.count_money {
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #999999;
	}
	
	.service_money{
		height: 35upx;
		line-height: 35upx;
		font-size: 26upx;
		color: #999999;
		margin-top: -35upx;
		margin-left: -25upx;
	}

	.submit {
		height: 100upx;
		width: 240upx;
		background-color: #63D0D5;
		line-height: 100upx;
		text-align: center;
		font-size: 32upx;
		color: #FFFFFF;
		font-weight: bold;
		position: absolute;
		right: 0upx;
		top: 0upx;
	}
</style>
